<template>
    <div class="tabs">
        <el-tag
        v-for="item,index in tags"
        :key="item.path"
        :closable="item.name !== 'home'"
        :effect="$route.name === item.name ? 'dark':'plain'"
        @click="changMenu(item)"
        @close="handleClose(item,index)"
        size="small"
        >
            {{item.label}}
        </el-tag>
    </div>
    
</template>

<script>
import { mapState, mapMutations } from 'vuex';
export default {
    name: 'CommponentTag',
    data () {
        return {

 
        }
    },
    computed: {
        ...mapState({
            tags: state => state.tab.tabList
        })
    },
    methods: {
        ...mapMutations(['closeTag']),
        changMenu(item) {
            this.$router.push({name: item.name});
        },
        handleClose(item ,index) {
            // 调用store中的closeTag进行删除
            this.closeTag(index);
            // 获取数组的最后一位
            const length = this.tags.length - 1; 
            // 如果删除不是高亮则不变
            if(item.name !== this.$route.name) {
                return
            }
            // 删除的是高亮则跳转到最后一个
            this.$router.push({name: this.tags[length].name})
        }
    }
}
</script>
 
<style lang = "less" scoped>
    .tabs {
        padding: 20px;
        .el-tag{
            margin-right: 15px;
            cursor: pointer;
        }
    }
</style>